<template>
  <div class="hospital-container">
    <!-- 搜索区域 -->
    <el-card shadow="never" class="search-card">
      <el-form :model="searchForm" label-width="100px">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="医院名称">
            <el-input v-model="searchForm.hospitalName" placeholder="请输入医院名称" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="医院编码">
            <el-input v-model="searchForm.hospitalCode" placeholder="请输入医院编码" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="状态">
            <el-select v-model="searchForm.delFlag" placeholder="请选择" clearable>
              <el-option label="正常" value="N" />
              <el-option label="已删除" value="Y" />
            </el-select>
          </el-form-item>
        </el-col>
          <el-col :span="24" style="text-align: right;">
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
    </el-card>

    <!-- 操作区域 -->
    <div class="operation-area">
      <el-button type="primary" @click="handleCreate">
        <el-icon><Plus /></el-icon>
        新增医院
      </el-button>
    </div>

    <!-- 表格区域 -->
    <el-card shadow="never">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        v-loading="loading"
      >
        <el-table-column prop="ID" label="ID" width="80" />
        <el-table-column prop="HospitalCode" label="医院编码" width="150" />
        <el-table-column prop="HospitalName" label="医院名称" min-width="180" />
        <el-table-column prop="AppID" label="应用ID" width="200" show-overflow-tooltip />
        <el-table-column prop="AppSecret" label="应用秘钥" width="200" show-overflow-tooltip />
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column label="操作" width="180" fixed="right">
          <template #default="{ row }">
            <el-button size="small" @click="handleEdit(row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="pagination.current"
          v-model:page-size="pagination.size"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 编辑对话框 -->
    <hospital-dialog
      v-model="dialogVisible"
      :dialog-type="dialogType"
      :current-data="currentData"
      @refresh="getList"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus'
import HospitalDialog from '../hospital/components/HospitalDialog.vue'
import { hospitalApi, type Hospital } from '@/api/hospital'

// 搜索表单
const searchForm = reactive({
  hospitalName: '',
  hospitalCode: ''
})

// 表格数据
const tableData = ref<Hospital[]>([])
const loading = ref(false)

// 分页配置
const pagination = reactive({
  current: 1,
  size: 10,
  total: 0
})

// 对话框控制
const dialogVisible = ref(false)
const dialogType = ref('create')
const currentData = ref<Partial<Hospital>>({})


// 获取医院列表
const getList = async () => {
  loading.value = true
  try {
    const { data } = await hospitalApi.fetchHospitals({ 
      ...searchForm,
      current: pagination.current,
      size: pagination.size
    })
    console.log("返回数据{}",data);
    tableData.value = data.list
    pagination.total = data.total
  } catch (error) {
    ElMessage.error('获取医院列表失败')
    console.error(error)
  } finally {
    loading.value = false
  }
}

// 搜索
const handleSearch = () => {
  pagination.current = 1
  getList()
}

// 重置搜索
const resetSearch = () => {
  searchForm.name = ''
  searchForm.level = ''
  searchForm.region = []
  handleSearch()
}

// 分页大小变化
const handleSizeChange = (size: number) => {
  pagination.size = size
  getList()
}

// 当前页变化
const handleCurrentChange = (current: number) => {
  pagination.current = current
  getList()
}

// 新增医院
const handleCreate = () => {
  dialogType.value = 'create'
  currentData.value = {}
  dialogVisible.value = true
}

// 编辑医院
const handleEdit = (row: Hospital) => {
  dialogType.value = 'edit'
  currentData.value = { ...row }
  dialogVisible.value = true
}

// 删除医院
const handleDelete = (row: Hospital) => {
  ElMessageBox.confirm('确认删除该医院信息吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    const loading = ElLoading.service({
      lock: true,
      text: '删除中...',
      background: 'rgba(0, 0, 0, 0.7)'
    })
    
    try {
      await hospitalApi.deleteHospital(row.id)
      ElMessage.success('删除成功')
      getList()
    } catch (error) {
      ElMessage.error('删除失败')
      console.error(error)
    } finally {
      loading.close()
    }
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

// 状态变更
const handleStatusChange = (row: Hospital) => {
  const loading = ElLoading.service({
    lock: true,
    text: '更新中...',
    background: 'rgba(0, 0, 0, 0.7)'
  })
  
  // toggleDelFlag(row.id, row.delFlag === 'N' ? 'Y' : 'N').then(() => {
  //   row.delFlag = row.delFlag === 'N' ? 'Y' : 'N'
  //   ElMessage.success('状态更新成功')
  // }).catch(error => {
  //   ElMessage.error('状态更新失败')
  //   console.error(error)
  // }).finally(() => {
  //   loading.close()
  // })
}

onMounted(() => {
  getList()
})
</script>

<style scoped>
.hospital-container {
  padding: 20px;
}

.search-card {
  margin-bottom: 20px;
}

.operation-area {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
